<template>
  <div class="header-contain">
    <div class="header-title">
      <span class="title-first">
        好的生活，要花很多钱
        <i class="iconfont icon-broadcast"></i>
        <ul class="title-ad"  :class="{anim:animate==true}">
          <li v-for="(item, index) in adList" :key="'ad'+index">
            <a class="ad-list" :href="item.adLink" target="_blank">
              {{ item.adContent}}
            </a>
          </li>
        </ul>
      </span>
      <span class="title-right">
        <span v-for="(item, index) in titleName" :key="'name'+index" class="title-name" :class="{'title-border': index > 1}">
          <el-dropdown v-if="item.childrenName">
            <span class="title-sub">
              客户服务<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="header-dropdown-style">
              <el-dropdown-item v-for="(sub, index) in item.childrenName" :key="'sub'+index">{{ sub }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
            <span v-else >
            <router-link :to="item.router" class="title-sub">{{ item.name }}</router-link>
            </span>
                  
        </span>


      </span>
    </div>
    <div class="header-search">
      
    </div>
      
  </div>

</template>
<script>
export default {
  data() {
    return {
      titleName: [
        { name: "登录", router: "/order" },
        { name: "注册", router: "/order" },
        { name: "我的订单", router: "/order" },
        { name: "会员", router: "/order" },
        { name: "甄选家", router: "/order" },
        { name: "企业采购", router: "/order" },
        {
          name: "客户服务",
          childrenName: ["在线客服", "帮助中心", "商务合作", "开放平台"]
        }
      ],
      adList: [
        { adContent: "广告内容1", adLink: "https://www.baidu.com" },
        { adContent: "广告内容2", adLink: "https://www.baidu.com" },
        { adContent: "广告内容3", adLink: "https://www.baidu.com" },
        { adContent: "广告内容4", adLink: "https://www.baidu.com" },
        { adContent: "广告内容5", adLink: "https://www.baidu.com" },
        { adContent: "广告内容6", adLink: "https://www.baidu.com" }
      ],
      animate: false
    };
  },
  created() {
    setInterval(this.scroll, 5000);
  },
  methods: {
    scroll() {
      this.animate = true;
      setTimeout(() => {
        this.adList.push(this.adList[0]);
        this.adList.shift(0);
        this.animate = false;
      }, 1500);
    }
  }
};
</script>
<style lang="less" scoped>
.header-contain {
  position: relative;
  top: 0;
  .header-title {
    height: 36px;
    line-height: 36px;
    background: #333;
    .title-first {
      color: #ccc;
      display: inline-block;
      width: 49%;
      text-align: center;
      font-size: 12px;
      .icon-broadcast {
        margin: 0 36px;
      }
      .title-ad {
        height: 100%;
        display: inline-block;
        position: absolute;
        list-style: none;
        display: inline-block;
        text-decoration: underline;
        overflow: hidden;
        .ad-list {
          color: #b4a078;
          cursor: pointer;
          &:hover {
            color: #fff;
          }
        }
      }
      .anim {
        transition: all 0.7s;
        margin-top: -36px;
        height: 72px;
      }
    }
    .title-right {
      text-align: center;
      display: inline-block;
      width: 49%;
      font-size: 12px;
      color: #ccc;

      .title-name {
        width: 10%;
        padding: 0 9px;
        cursor: pointer;
        &:hover {
          color: #fff;
        }
        .title-sub {
          font-size: 12px;
          color: #ccc;
          &:hover {
            color: #fff;
          }
        }
      }
      .title-border {
        border-left: 1px solid #aaa;
      }
    }
  }
}

.header-dropdown-style {
  width: 90px;
  padding: 0;
  text-align: center;
  .el-dropdown-menu__item {
    display: inline-block;
    padding: 0;
    border-top: 1px solid #ccc;
  }
  .el-dropdown-menu__item:first-child {
    border-top: 1px solid #fff;
  }
  .el-dropdown-menu__item:hover {
    background: #fff;
    color: #b4a078;
  }
}
</style>


